<template>
    <div class="search-container">
      <el-input
        v-model="query"
        placeholder="请输入搜索内容"
        class="enhanced-search-input"
        @keyup.enter.native="handleSearch"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="handleSearch" circle></el-button>
        </template>
      </el-input>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SearchBox',
    data() {
      return {
        query: ''
      }
    },
    methods: {
      handleSearch() {
        console.log('Searching for:', this.query);
        // 在这里实现你的搜索逻辑
      }
    }
  }
  </script>
  
  <style scoped>
  .search-container {
    display: flex;
    justify-content: center;
    margin-top: 100px; /* 根据需要调整 */
  }
  
  .enhanced-search-input .el-input__inner {
    height: 50px; /* 增加输入框高度 */
    font-size: 18px; /* 调整字体大小以匹配输入框大小 */
    border-radius: 25px; /* 圆角处理 */
    padding-left: 20px; /* 增加内边距 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
  }
  
  .enhanced-search-input .el-input-group__append {
    border: none; /* 移除默认边框 */
  }
  
  .enhanced-search-input .el-button {
    height: 50px; /* 确保按钮与输入框高度一致 */
    width: 50px; /* 设置一个正方形的搜索按钮 */
    border-radius: 0 25px 25px 0; /* 确保按钮与输入框圆角匹配 */
    background-color: #409EFF; /* 自定义按钮颜色 */
    color: white; /* 文字颜色 */
    font-size: 18px; /* 调整图标大小 */
    transition: background-color 0.3s ease; /* 按钮背景色过渡 */
  }
  
  .enhanced-search-input .el-button:hover {
    background-color: #66b1ff; /* 鼠标悬停时的背景色 */
  }
  </style>